<template>
    <el-dialog :title="title" :visible="true" @close="$emit('close')" width="700px" >
        <el-form :model="form" v-loading="loading" ref="form" :rules="rules"  label-width="80px" style="padding-right: 40px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model.trim="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="!id">
                <el-input v-model.trim="form.password" :type="passwordVisible ? 'text' : 'password'">
                    <i slot="suffix" v-if="passwordVisible === true" class="fa fa-eye" @click="passwordVisible = !passwordVisible"></i>
                    <i slot="suffix" v-else class="fa fa-eye-slash" @click="passwordVisible = !passwordVisible"></i>
                </el-input>
            </el-form-item>
            <el-form-item label="用户组" prop="group_id">
                <el-select  v-model="form.group_id" style="width: 100%">
                    <el-option v-for="item in groups" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="启用">
                <el-switch v-model="form.enabled"></el-switch>
            </el-form-item>
        </el-form>

        <template slot="footer" class="dialog-footer">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button :loading="submitting" type="primary" @click="submit">提交</el-button>
        </template>
    </el-dialog>

</template>

<script>
    import axios from 'axios'

    export default {
        props: ['id'],
        data() {
            return {
                loading: false,
                submitting: false,
                title: this.id ? '编辑管理员' : '添加管理员',
                form: {
                    username: null,
                    password: null,
                    group_id: null,
                    enabled: true,
                },
                passwordVisible: false,
                groups: [],
                rules: {
                    username: [{required: true, message: '不能为空', trigger: 'blur'}],
                    password: [{required: true,  min: 8, message: '至少为8位', trigger: 'blur'}],
                    group_id: [{required: true, message: '不能为空', trigger: 'blur'}],
                }
            }
        },
        async created() {
            this.loading = true;

            const promise = axios.get('/sys/group/list');

            if (this.id) {
                const user = await axios.get('/sys/user/' + this.id);
                this.form.username = user.username;
                this.form.group_id = user.group_id;
                this.form.enabled = user.enabled;
            }

            this.groups = await promise;
            this.loading = false;
        },
        methods: {
            submit() {
                this.$refs['form'].validate(async valid => {
                    if (!valid) return;
                    this.submitting = true;
                    try {
                        if (this.id) {
                            await axios.put('/sys/user/' + this.id, this.form);
                        } else {
                            await axios.post('/sys/user', this.form);
                        }
                        this.$emit('reload');
                        this.$emit('close');
                    } catch (e) {

                    }
                    this.submitting = false;
                })
            }
        }
    }
</script>